<template>
  <view class="operation-box">
    <!-- 拍照 -->
    <button class="operation-btn" @click="operationPhoto">
      <uni-icons color="#fff" type="camera" size="30"></uni-icons>
    </button>

    <!-- 录视频 -->
    <button class="operation-btn" @click="operationVideo">
      <uni-icons color="#fff" type="videocam" size="30"></uni-icons>
    </button>

    <!-- 录音 -->
    <button class="operation-btn" @click="startRecord">
      <uni-icons color="#fff" type="mic" size="30"></uni-icons>
    </button>

    <!-- webview 环境 -->
    <AudioRecordWithWebview
      v-if="info.environmentType === 'window_plus_has'"
      ref="RefRecorder_1"
      @recordBack="recordBack"
    />
    <!-- h5环境 -->
    <!-- app环境 -->
    <AudioRecordWithApp
      v-if="info.environmentType === 'app_plus'"
      ref="RefRecorder_3"
      @recordBack="recordBack"
    />
  </view>
</template>

<script setup>
import utils from '@/common/js/utils/index.js';
const Custom_sendLog = utils.Custom_sendLog; // 输出日志
import { FileUploadVideo, FileUploadImage, FileUploadPublic } from '@/api';

const info = reactive({
  environmentType: '', // 运行环境
});

onMounted(() => {
  info.environmentType = utils.getEnvironmentType();
  uni.showToast({
    title: '录音' + info.environmentType,
    icon: 'none',
  });
});

const RefRecorder_1 = ref(null);
const RefRecorder_2 = ref(null);
const RefRecorder_3 = ref(null);

const emit = defineEmits(['confirm']);

const operationPhoto = () => {
  FileUploadImage()
    .then((backInfo = []) => {
      backInfo.forEach((item) => {
        if (item.size <= 50 * 1024 * 1024) {
          uploadOneImage(item.path);
        } else {
          uni.showToast({
            title: '图片大小不能超过50M',
            icon: 'none',
          });
        }
      });
    })
    .catch((err) => {
      console.error('图片获取失败:', err);
    });
};

// 逐个上传
/*
{
  "data": "{\"msg\":\"成功\",\"code\":\"0\",\"data\":
  [{\"docname\":\"1725015362613.jpg\",\"seq\":\"1725016483152\"}]}",
  "statusCode": 200,
  "errMsg": "uploadFile:ok"
}
*/
const uploadOneImage = (path) => {
  uni.showLoading({
    title: '上传中...',
    mask: true,
  });

  FileUploadPublic({
    filePath: path,
  })
    .then((res) => {
      console.log('图片上传结果', res);
      if (res.statusCode === 200) {
        const backData = JSON.parse(res.data);
        if (backData.code === '0') {
          emit('confirm', {
            filename: backData.data[0].docname,
            fileno: backData.data[0].seq,
            source: 'MOBILE',
          });
        } else {
          uni.showToast({
            title: '上传出错',
            icon: 'none',
          });
        }
      } else {
        uni.showToast({
          title: '上传出错',
          icon: 'none',
        });
      }
    })
    .catch((err) => {
      console.error('上传失败:', err);
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const operationVideo = () => {
  console.log('视频上传');
  FileUploadVideo()
    .then((backInfo = []) => {
      backInfo.forEach((v) => {
        emit('confirm', {
          filename: v.docname,
          fileno: v.seq,
          source: 'MOBILE',
        });
      });
    })
    .catch((err) => {
      console.error('视频上传失败:', err);
    });
};

const startRecord = () => {
  Custom_sendLog({
    name: 'environmentType',
    data: info.environmentType,
  });
  if (info.environmentType === 'window_plus_has') {
    RefRecorder_1.value.open();
  } else if (info.environmentType === 'window_plus_no') {
    uni.showToast({
      title: '暂不支持录音',
      icon: 'none',
    });
  } else {
    RefRecorder_3.value.open();
  }
};
const recordBack = (res) => {
  console.log('录音完成', res);

  res.forEach((v) => {
    emit('confirm', {
      filename: v.docname,
      fileno: v.seq,
      source: 'MOBILE',
    });
  });

  // [
  //     {
  //         "docname": "1725175505437.mp3",
  //         "seq": "1725176623276"
  //     }
  // ]
};
</script>

<style></style>
